<template>
  <div :id="id"></div>
</template>

<script>
import { QNRTPlayer } from 'qn-rtplayer-web'

export default {
  name: 'QNRTPlayer',
  props: {
    id: {
      type: String,
      default: 'player'
    },
    url: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    className: {
      type: String,
      default: ''
    },
    objectFit: {
      type: String,
      default: ''
    },
    volumn: {
      type: Number,
      default: 0.5
    },
    controls: {
      type: Boolean,
      default: true
    },
    playsinline: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      player: null
    }
  },
  mounted () {
    this.player = new QNRTPlayer()
    // 2. 初始化配置信息
    this.player.init({
      width: this.width,
      height: this.height,
      className: this.className,
      objectFit: this.objectFit,
      volumn: this.volumn,
      controls: this.controls,
      playsinline: this.playsinline
    })
    // 3. 传入播放地址及容器，开始播放
    this.player.play(this.url, document.getElementById(this.id))
  }
}
</script>

<style scoped>

</style>
